<!--
 * @Descripttion: 
 * @Version: 1.0
 * @Author: wcl
 * @Date: 2023-11-23 15:06:25
 * @LastEditors: wcl
 * @LastEditTime: 2023-11-23 15:59:08
-->
<template>
    <div>
        <a-modal v-model:open="modalOpen" :title="title" width="50%" :footer="null">
            <a-space direction="vertical" style="width: 100%" :size="16">
                <a-form :model="formData" ref="formRef" :rules="rules" labelAlign="left" :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }">
                    <a-form-item label="分组名称" name="name">
                        <a-input v-model:value="formData.name" placeholder="输入分组名称" />
                    </a-form-item>
                    <a-form-item label="展示排序" name="sort" >
                        <a-input v-model:value="formData.sort" placeholder="输入排序数字编号"/>
                    </a-form-item>
                    <a-form-item label="状态" name="status">
                        <a-select ref="select" v-model:value="formData.status" placeholder="请选择会员状态">
                            <a-select-option :value="1">启用</a-select-option>
                            <a-select-option :value="0">禁用</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-form>
                <div class="modal-but-layout">
                    <a-space wrap>
                        <a-popconfirm title="您是否要数据重置?" ok-text="是" cancel-text="否" @confirm="confirm">
                            <a-button>重置</a-button>
                        </a-popconfirm>
                        <a-button type="primary" @click="handleSubmit">提交</a-button>
                    </a-space>
                </div>
            </a-space>
        </a-modal>
    </div>
</template>
<script setup>
import { ref } from 'vue'
const modalOpen = ref(false)
const formRef = ref(null)
const formData = ref({
    name: undefined,
    describe: undefined,
    img: undefined,
    introduceImg: undefined,
    status: 1,
})
const rules = {
    name: [{ required: true, message: '输入特权名称' }],
    describe: [{ required: true, message: '输入特权描述' }],
    img: [{ required: true, message: '请上传特权图标' }],
    introduceImg: [{ required: true, message: '请上传特权介绍图' }],
    sort: [{ required: true, message: '请输入序号' }],
    status: [{ required: true, message: '请选择会员状态' }],
}
const title = ref('')
const open = (titles) => {
    title.value = titles
    modalOpen.value = true
}
const handleSubmit = async (res) => {
    formRef.value.validate().then((res) => {
        console.log(formData.value)
    })
}
const confirm = () => {
    formData.value = {
        name: undefined,
        describe: undefined,
        img: undefined,
        introduceImg: undefined,
        status: 1,
    }
}
defineExpose({ modalOpen, open })
</script>
<style lang="scss" scoped></style>
